<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8"/>
    <title>景点详情</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" th:href="${#httpServletRequest.getContextPath()+'/static/x-admin/css/font.css'}"/>
    <link rel="stylesheet" th:href="${#httpServletRequest.getContextPath()+'/static/x-admin/css/xadmin.css'}"/>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" th:src="${#httpServletRequest.getContextPath()+'/static/x-admin/lib/layui/layui.js'}" charset="utf-8"></script>
    <script type="text/javascript" th:src="${#httpServletRequest.getContextPath()+'/static/x-admin/js/xadmin.js'}"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <div class="x-body layui-anim layui-anim-up">
		<table class="layui-table">
		  <thead>
		    <tr>
		      <th>名称</th>
		      <th>类型</th>
		      <th>描述</th>
		      <th>创建时间</th>
		    </tr> 
		  </thead>
		  <tbody>
		    <tr>
		      <td th:text="${view.viewname}"></td>
		      <td th:text="${view.type}"></td>
		      <td th:text="${view.introduction}"></td>
		      <td th:text="${#dates.format(view.createtime, 'yyyy-MM-dd')}"></td>
		    </tr>
		  </tbody>
		</table>
		<br/>
		
		<div th:unless="${#lists.isEmpty(pictures)}">
			<b>图片:<br/></b>
		    <span th:each="picture:${pictures}">
		    	&nbsp;&nbsp;
		    	<img alt="" th:src="${'/picture/getPicture.html?path='+picture.path}" height="280px" width="280px"/>
		    </span>
	    </div>
	    
	    <div th:unless="${#lists.isEmpty(videos)}">
			<b>视频:<br/></b>
		    <span th:each="video:${videos}">
		    	&nbsp;&nbsp;
		       <video th:src="${'/picture/getPicture.html?path='+video.path}" style="height: 280px;width: 280px;" controls="true"/>
		     </span>
	    </div>
	    
	    <br/>
	    <div th:unless="${#lists.isEmpty(commentsByViewId)}">
			<b>评论:<br/></b>
		    <div th:each="comment:${commentsByViewId}">
		    	<span th:text="${#dates.format(view.createtime, 'yyyy-MM-dd')}"></span>
		    	<span th:text="${comment.content}"></span>
		    </div>
	    </div>
	    
	    <br/>
   		<form class="layui-form">
			<input type="hidden" th:value="${view.id}" name="viewId"/>
   		  <div class="layui-form-item layui-form-text">
		    <label class="layui-form-label">发表评论</label>
		    <div class="layui-input-block">
		      <textarea name="comment" placeholder="请输入内容" class="layui-textarea"></textarea>
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <div class="layui-input-block">
		      <button class="layui-btn" lay-filter="commentForm" lay-submit="">立即提交</button>
		    </div>
		  </div>
		</form>
    </div>
  </body>

</html>
    <script>
        layui.use(['form','layer'], function(){
            $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer;
        
          //监听提交
          form.on('submit(commentForm)', function(data){
        	  console.log(data.field);
       	    //异步提交数据
       	    $.post("/comment/addComment.html",data.field,function(response){
       	    	if(response.success == true){
       	    	  layer.msg("增加成功", {icon: 6},function () {
                      // 获得frame索引
                      var index = parent.layer.getFrameIndex(window.name);
                      //关闭当前frame
                      parent.layer.close(index);
                      // 父页面刷新
                      parent.location.reload();
                  });
       	    	}else{
       	    		layer.alert(response.msg);
       	    	}
       	    });
            return false;
          });
        });
    </script>